<template>
    <div class="from">
      <ul class="thead">
        <li>姓名</li>
        <li>胜次</li>
        <li class="width">
          <p>胜率(%)</p>
          <p class="p"><span>盘</span>
          <span>局</span>
          <span>分</span></p>
        </li>
        <li>名次</li>
      </ul>
      <ul class="tbody" v-for="(itme,index) in form" :key="index" :class="{'height': itme.user_name.length>5,'heights': itme.user_name.length>10,'fiveHeight': itme.user_name.length>15,'sixHeight': itme.user_name.length>20}">
        <li>{{itme.team_name != null ? itme.team_name : itme.user_name}}</li>
        <li>
          <span v-if="itme.first_score != null">{{itme.first_score}}
          {{itme.win_time ? '/'+itme.win_time :  itme.win_time === null && itme.rank_one !== null ? '/0' : ''}}
          </span>
          <span v-else>
            {{itme.win_time ? itme.win_time :  itme.win_time === null && itme.rank_one !== null ? '0' : ''}}
          </span>
        </li>
        <li class="width">
          <span>{{itme.plate_rate != null ? itme.plate_rate : ''}}</span>
          <span>{{itme.round_rate}}</span>
          <span>{{itme.score_rate}}</span>
        </li>
        <li v-if="itme.rank_one != null && itme.rank_one">{{ itme.rank_one.length > 1 ?  itme.rank_one.substr(1) : itme.rank_one}}</li>
        <li v-if="itme.rank_one == null"></li>
      </ul>
    </div>
</template>

<script>
export default {
  name: "from",
  data(){
    return{

    }
  },
  props:{
    form: Array,
  },
}
</script>

<style lang="less" scoped>
.from{
  padding: 0.4rem 0.2rem;
  border-top: 2px solid rgba(187, 187, 187, 1);
  margin-top: 0.7rem;
  .thead{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.64rem;
    line-height: 0.64rem;
    border: 1px #42B574 solid;
    li{
      width:20%;
      // border:1px #42B574 solid;
      height: 100%;
    }
    li:not(:last-child){
      border-right:1px #42B574 solid;
    }
    .width{
      width: 40%;
      line-height: 1.4;
      font-size: 0.22rem;
      p{
        height:50%;
      }
      .p{
        border-top:1px #42B574 solid;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      span{
        display:inline-block;
        width: 33.3%;
        height: 100%;
        border-right: 1px #42B574 solid;
      }
      span:nth-child(3){
        border-right:none
      }
    }
  }
  .tbody{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.64rem;
    border: 1px #42B574 solid;
    border-top: none;
    /*line-height: 0.64rem;*/
    .width{
      width: 40%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      span{
        display:inline-block;
        width: 33.3%;
        height: 100%;
        border-right: 1px #42B574 solid;
        display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      }
    }
    li{
      width:20%;
      // border: 1px #42B574 solid;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      // white-space: nowrap;
      // overflow: hidden;
      span:nth-child(3){
        border-right:none
      }
    }
    li:not(:last-child){
      border-right:1px #42B574 solid;
    }
  }
  .height{height: 0.8rem;}
  .heights{height: 1.2rem;}
	.fiveHeight{height: 1.6rem;}
	.sixHeight{height: 2rem;}
}
</style>
